<template>
  <div>
    <h5>count组件</h5>
    <p>count的值是：{{ count }}
      <button @click="count++">增加</button>
    </p>
    <p>
      pcount的值是：{{
        pcount
      }}
      <button @click="pcount = pcount + 1">增加</button>
    </p>
    <!--用pcount++会自动把字符串转成数字，pcount+1,如果pcount是字符串，则拼接操作-->
    <p>
      username的值是：{{
        username
      }}
      <button @click="modifyUsername">修改username</button>
    </p>
    <p>
      userinfo.address的值是:{{
        userinfo.address
      }}
      <button @click="modifyUserinfo">修改address</button>
    </p>
  </div>
</template>
<script>
export default {
  props: ['init', 'username', 'userinfo'],
  data: function () {
    return {
      count: 0,
      pcount: this.init
    }
  },
  methods: {
    modifyUsername () {
      this.username = 'aaa' // 引用类型不能修改引用的地址
    },
    modifyUserinfo () {
      this.userinfo.address = "hub" // 引用类型可以修改引用的值
    }
  }
}
</script>
<style></style>
